// UserRecover.js
import { replaceN } from '@/utils/index';
import { useEffect, useState } from 'react';
import Typewriter from './Typewriter';
const UserRecover = ({
  data,
  scrollToBottom,
  spend = 20,
  isTypewriter = true,
  onComplete = () => {},
}) => {
  const [list, setList] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  useEffect(() => {
    if (data.length > 0) {
      setList([data[0]]);
    }
  }, [data]);
  const addNextCommand = () => {
    const nextIndex = currentIndex + 1;
    if (nextIndex < data.length) {
      setList((prevList) => [...prevList, data[nextIndex]]);
      setCurrentIndex(nextIndex);
    } else {
      //索引+1 用于结束最后一个的打字机
      setCurrentIndex(nextIndex);
      onComplete();
    }
    scrollToBottom();
  };

  return (
    <>
      {list.length > 0 &&
        list.map((item, index) => (
          <div className="commandList marginRight systemTxtRecover" key={index}>
            {index === currentIndex && isTypewriter ? (
              <Typewriter
                className="commandList-bd"
                text={replaceN(item)}
                spend={spend}
                onComplete={addNextCommand}
              />
            ) : (
              <div
                className="commandList-bd"
                dangerouslySetInnerHTML={{ __html: replaceN(item) }}
              ></div>
            )}
          </div>
        ))}
    </>
  );
};

export default UserRecover;
